<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="text" id="username"><br>
    <input type="text" id="password"><br>
    <input type="button" value="登录" id="btn">
</body>
<script>

    const un = document.querySelector("#username");
    const pw = document.querySelector("#password");
    const login = document.querySelector("#btn");
    
    
    login.onclick = function(){
        let url = "http://10.11.60.96:3000/login";
        ajaxGet(url, {
            username: un.value,
            password: pw.value
        }, function( res ){
            // 成功
            console.log("请求成功了，数据为：", res)
        });
    }


    // 参数1：表示请求地址，字符，必传
    // 参数2：请求时发送的数据，对象，可选
    // 参数3：请求完成时要执行的功能，函数，必传

    
    function ajaxGet(url, data, cb){
        // 1. 参数处理
        // 当参数2不传时，原参数3传入了参数2，所以要判断参数2的类型是否是函数，如果是函数，表示原参数2没传，要处理默认值
        if(typeof data === "function"){
            // 将现参数2接收到的函数，给参数3，同时设置现参数2的默认值为空对象
            cb = data;
            data = {};
        }

        // 2. 解析要发送的数据，拼接成前后端交互数据的格式：名=值&名=值
        let str = "";
        for(let i in data){
            str += `${i}=${data[i]}&`;
        }

        // 3. 将要发送的数据按照get的方式，拼接到url身上
        url += "?" + str.slice(0, -1);

        // 4. 开启ajax
        const xhr = new XMLHttpRequest();
        xhr.open("get", url);
        xhr.onload = function(){
            if(xhr.status === 200){
                // 5. 请求完成后，执行传入的功能，并把请求成功后的响应数据，传给外部传入的功能
                cb(xhr.responseText);
            }
        }
        xhr.send();
    }
    
</script>
</html>